﻿<%@ Page Language="C#" AutoEventWireup="true" CodeBehind="Default.aspx.cs" Inherits="S.Sams.GoogleMap.Web.Default" ValidateRequest
="false" %>

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">

<html xmlns="http://www.w3.org/1999/xhtml" xmlns:v="urn:schemas-microsoft-com:vml">
<head runat="server">
    <title>演示Demo</title>
    <style type="text/css">v\:* {behavior:url(#default#VML);}</style>
    <style type="text/css">
        div{font-size:12px;font-family: Arial;}
        h1,h3{padding:0;margin: 5px;font-size: 16px;}
        h3{border-bottom: solid 3px #eee; padding: 5px 20px; color: blue;}
        .panel{border-bottom: dotted 1px #000; padding: 5px 10px;}
    </style>
</head>
<body>
    <form id="form1" runat="server">

    <div style="width:950px; padding: 10px 0; margin: 0 auto;">
    
    <h3><a href="default.html">演示Demo</a> - <a href="example.aspx">操作实例</a> - <a href="ShowXY.html">获取经纬度放大系数</a></h3><br />
    
    <div>
        <asp:Literal ID="GooleMap" runat="server" EnableViewState="false"></asp:Literal>
        <script type="text/javascript">
            function getCurrentPoint(x, y, z) {
                document.getElementById('returnjsvalue').innerHTML = "X:" + x + " Y:" + y + " ZoomIN:" + z;
            }
        </script>
        <div id="showmymap" style="margin: 0 auto; width: 700px; height: 500px;"></div>
    </div>
    <div style="text-align: center; margin: 0 auto;">
        <asp:Literal ID="BuiderBtn" runat="server"></asp:Literal>
        <div id="returnjsvalue" style="color:Green; font-size: 13px; font-weight: bold;"></div>
    </div>
    
    <div>
    <h1>可在API中控制所有地图元素, 包括工具显示方式(迷你/普通/完整), 初始化显示(地图/卫星/混合/地形) 等一系列操作!</h1>
    <hr />  
    <h3>初始化设置:</h3>
    是否引用本地脚本文件 <asp:CheckBox ID="IsUseLocation" runat="server"/> 
    是否进行脚本压缩输出 <asp:CheckBox ID="IsPackJs" runat="server"/> 地图JS引擎: <asp:TextBox ID="_googlemapsjs" runat="server" Text="http://maps.google.com/" /> http://ditu.google.com/
      
    <h3>常规设置:</h3>
    APPID: <asp:TextBox ID="appid" runat="server" Text="ABQIAAAAT2TW27KPpzTcS3Av9rRZ8xTMc_QNvQYPZO4F6J-ygmVXuqkocRS6gkKMvUKO2am7UGh-wFKm8McGSQ" />
    地图默认放大系数: <asp:TextBox ID="scaleint" runat="server" Text="13" Width="20" />
    页面载入对象ID:<asp:TextBox ID="showmymap2" runat="server" Text="showmymap"></asp:TextBox>
    <br />
    
    显示缩略图预览:<asp:CheckBox ID="mapview" runat="server" Checked="false" /> 
    缩略图宽度:<asp:TextBox ID="MapViewWidth" runat="server" Text="200" Width="37px"></asp:TextBox>
    缩略图高度:<asp:TextBox ID="MapViewHeight" runat="server" Text="150" Width="37px"></asp:TextBox>
    <br />
    
    显示地图显示类型: <asp:CheckBox ID="IsMapType" runat="server" Checked="true" />, 
    显示比例尺:<asp:CheckBox ID="mapscale" runat="server" Checked="true" />, 
    显示中心点标注说明:<asp:CheckBox ID="IsShowCenterMsg" runat="server" />, 
    显示控制工具条:<asp:CheckBox ID="IsMapControls" runat="server" Checked="true" />, 
    启用鼠标滚轮动作:<asp:CheckBox ID="EnabledScrollWheelZoom" runat="server"/>, 
    地图搜索功能:<asp:CheckBox ID="EnableGoogleBar" runat="server"/>, 
    打开搜索框:<asp:CheckBox ID="EnableGoogleBarShow" runat="server"/>
    <br />
    
    添加标注点之间线条: 
    <asp:CheckBox ID="IsAddLine" runat="server" />
    添加标注点封闭线条: 
    <asp:CheckBox ID="IsAddLineEnd" runat="server" />
    标注线条颜色: 
    <asp:TextBox ID="AddLine16Color" runat="server" Text="#FF80FF" Width="63px"></asp:TextBox>
    标注线条宽度: <asp:TextBox ID="AddLineWidth" runat="server" Text="10" Width="27px"></asp:TextBox>
    <br />
    
     附加线条颜色:<asp:TextBox ID="GetMapLines_Color" runat="server" Width="70">#FF0000</asp:TextBox> 大小:<asp:TextBox ID="GetMapLines_Width" runat="server" Width="20">12</asp:TextBox> 显示附加线条:<asp:CheckBox ID="addLines" runat="server" Checked="false" /> (附加线条在这里使用当前的标注点, 可重定义)<br />
    </div>
    
    <h3>自定义标注点:</h3>
    <div>初始化位置用标注点列表点1 </div>
    <div class="panel">
        启用用户自定义标注点:<asp:CheckBox ID="isEnabledUserCusstom" runat="server" />, 
        只允许标注一个点: <asp:CheckBox ID="isUsePointOne" runat="server" Checked="true" />, 
        单击地图时显示提示信息: <asp:CheckBox ID="isClickShowMsg" runat="server" Checked="true" />
    </div>
    <div class="panel">
        自定义标注点消息: <asp:TextBox ID="UsePointOneMsg" runat="server">自定义标注点消息</asp:TextBox> 
        自定义函数: <asp:TextBox ID="FunctionName" runat="server">getCurrentPoint</asp:TextBox>
    </div>
    
    <h3>标注点列表: (启用 标注点预览 消息显示无效, 标注点1为多标签消息显示!)</h3>
    <div class="panel">
        1. X:<asp:TextBox ID="L1_x" runat="server" Width="70">23.110300</asp:TextBox>
        Y:<asp:TextBox ID="L1_y" runat="server" Width="70">113.296400</asp:TextBox>
        <asp:CheckBox ID="L1_iscenter" runat="server" Text="中心点" Checked="true" />
        ZoomIn:<asp:TextBox ID="L1_zoomin" runat="server" Width="20">13</asp:TextBox>
        Msg:<asp:TextBox ID="L1_msg" runat="server" Width="70" Enabled="false">中国广东省广州市东山区二沙岛</asp:TextBox>
        Image:<asp:TextBox ID="L1_img" runat="server" Width="70"></asp:TextBox>
        <asp:CheckBox ID="L1_mapview" runat="server" Text="标注点预览" /> 
        <asp:CheckBox ID="L1_visible" runat="server" Text="显示" Checked="true" />
        最大化内容: <asp:TextBox ID="L1_maxcontent" runat="server" Width="70" Enabled="false"></asp:TextBox> 标题: <asp:TextBox ID="L1_maxtitle" runat="server" Width="50" Enabled="false"></asp:TextBox>
    </div>
    <div class="panel">
        2. X:<asp:TextBox ID="L2_x" runat="server" Width="70">23.1167</asp:TextBox>
        Y:<asp:TextBox ID="L2_y" runat="server" Width="70">113.2500</asp:TextBox>
        <asp:CheckBox ID="L2_iscenter" runat="server" Text="中心点" />
        ZoomIn:<asp:TextBox ID="L2_zoomin" runat="server" Width="20">13</asp:TextBox>
        Msg:<asp:TextBox ID="L2_msg" runat="server" Width="70">中国广东省广州市</asp:TextBox>
        Image:<asp:TextBox ID="L2_img" runat="server" Width="70">http://www.google.com/mapfiles/markerG.png</asp:TextBox>
        <asp:CheckBox ID="L2_mapview" runat="server" Text="标注点预览" /> 
        <asp:CheckBox ID="L2_visible" runat="server" Text="显示" Checked="true" />
        最大化内容: <asp:TextBox ID="L2_maxcontent" runat="server" Width="70"></asp:TextBox> 标题: <asp:TextBox ID="L2_maxtitle" runat="server" Width="50"></asp:TextBox>
    </div>
    <div class="panel">
        3. X:<asp:TextBox ID="L3_x" runat="server" Width="70">23.118912</asp:TextBox>
        Y:<asp:TextBox ID="L3_y" runat="server" Width="70">113.261429</asp:TextBox>
        <asp:CheckBox ID="L3_iscenter" runat="server" Text="中心点" />
        ZoomIn:<asp:TextBox ID="L3_zoomin" runat="server" Width="20">13</asp:TextBox>
        Msg:<asp:TextBox ID="L3_msg" runat="server" Width="70">中国广东省广州市海珠广场</asp:TextBox>
        Image:<asp:TextBox ID="L3_img" runat="server" Width="70"></asp:TextBox> 
        <asp:CheckBox ID="L3_mapview" runat="server" Text="标注点预览" /> 
        <asp:CheckBox ID="L3_visible" runat="server" Text="显示" Checked="true" />
        最大化内容: <asp:TextBox ID="L3_maxcontent" runat="server" Width="70"></asp:TextBox> 标题: <asp:TextBox ID="L3_maxtitle" runat="server" Width="50"></asp:TextBox>
    </div>
    <div class="panel">
        4. X:<asp:TextBox ID="L4_x" runat="server" Width="70">23.134392</asp:TextBox>
        Y:<asp:TextBox ID="L4_y" runat="server" Width="70">113.287564</asp:TextBox>
        <asp:CheckBox ID="L4_iscenter" runat="server" Text="中心点" />
        ZoomIn:<asp:TextBox ID="L4_zoomin" runat="server" Width="20">13</asp:TextBox>
        Msg:<asp:TextBox ID="L4_msg" runat="server" Width="70">一起飞国际机票网</asp:TextBox>
        Image:<asp:TextBox ID="L4_img" runat="server" Width="70">http://www.google.com/mapfiles/markerY.png</asp:TextBox>
        <asp:CheckBox ID="L4_mapview" runat="server" Text="标注点预览" />
        <asp:CheckBox ID="L4_visible" runat="server" Text="显示" Checked="true" />
        最大化内容: <asp:TextBox ID="L4_maxcontent" runat="server" Width="70">&lt;div&gt;&lt;strong&gt;一起飞国际机票网&lt;/strong&gt;&lt;/div&gt;&lt;img src=&#39;http://jp.yiqifei.com/images/logo.png&#39; /&gt;</asp:TextBox> 标题: <asp:TextBox ID="L4_maxtitle" runat="server" Width="50">放大的标题</asp:TextBox>
    </div>
    <div class="panel">
        5. X:<asp:TextBox ID="L5_x" runat="server" Width="70">23.069269</asp:TextBox>
        Y:<asp:TextBox ID="L5_y" runat="server" Width="70">113.295007</asp:TextBox>
        <asp:CheckBox ID="L5_iscenter" runat="server" Text="中心点" />
        ZoomIn:<asp:TextBox ID="L5_zoomin" runat="server" Width="20">13</asp:TextBox>
        Msg:<asp:TextBox ID="L5_msg" runat="server" Width="70"></asp:TextBox>
        Image:<asp:TextBox ID="L5_img" runat="server" Width="70"></asp:TextBox>
        <asp:CheckBox ID="L5_mapview" runat="server" Text="标注点预览" />
        <asp:CheckBox ID="L5_visible" runat="server" Text="显示" Checked="true" />
        最大化内容: <asp:TextBox ID="L5_maxcontent" runat="server" Width="70"></asp:TextBox> 标题: <asp:TextBox ID="L5_maxtitle" runat="server" Width="50"></asp:TextBox>
    </div>
    <br />  
    <asp:Button ID="Button1" runat="server" Text="重新设置地图" onclick="Button1_Click" 
        Height="53px" Width="140px" /> 
    <asp:Button ID="Button3" runat="server" Text="以地形图显示(放大系数:5)"
        Height="53px" Width="200px" onclick="Button3_Click" />
    <asp:Button ID="Button2" runat="server" Text="应用设置并将当前地图转成图片" ToolTip="如果图片生成显示不了, 请检查您的 APPID 是否设置正常!"
        Height="53px" Width="219px" onclick="Button2_Click" /> 
    宽度: <asp:TextBox ID="_width" runat="server" Text="600" Width="50" /> 高度: <asp:TextBox ID="_height" runat="server" Text="600" Width="50" /> (超过600无效)
    <div style="padding: 10px;">
        <asp:Label ID="_imagesrc" runat="server" />
        <asp:Literal ID="_imgtemp" runat="server" Visible="false">
            <div style="color: Red; font-weight: bold">如果图片生成显示不了, 请检查您的 APPID 是否设置正常! (图片不支持附加的线条组, 只支持Label点之间线条)</div>
            <div>Use of the Google Static Maps API is also subject to a query limit of 1000 unique (different) image requests per viewer per day.</div>
            <img src='{GoogleMapsImg}' />
        </asp:Literal>
    </div>
    <div>
        <h3>2008-08-28 新增</h3>
        <ol>
            <li>增加多标签 Tab 项支持</li>
            <li>Javascript 脚本压缩输出</li>
            <li>增加用户自定义标注支持</li>
            <li>用户自定义标注点支持消息显示和回调函数自定义 CallBack</li>
            <li>改进 google maps 处理流程</li>
            <li>标注点 ZoomIn 支持 0 值, 不改当前地图的 ZoomIn 值</li>
            <li>增加地图启用鼠标滚轮动作控制</li>
        </ol>
        <h3>2008-08-29 新增</h3>
        <ol>
            <li>增加标注点缩略图预览 Label.IsShowMapView = true 即可!</li>
            <li>增加支持将地图输出为图片</li>
        </ol>
        <h3>2008-08-30 新增</h3>
        <ol>
            <li>增加标注点支持消息显示框放大和内容重置</li>
            <li>增加支持地图搜索功能</li>
            <li>支持地图Javascript引擎地址自定义(可切换到 http://ditu.google.com/)</li>
            <li>重写标注点定义</li>
        </ol>
        <h3>2008-09-08 更新</h3>
        <ol>
            <li>修正地图生成图片bug</li>
            <li>动态加载 javascript onload / onunload 事件</li>
        </ol>
    </div>
    
    </div>
    </form>
    
</body>
</html>
